<template>
  <div class="device">
    <div class="header flex-row flex-align-items-c flex-justify-content-sb">
      <p class="header-title">设备管理</p>
      <div class="flex-row flex-align-items-c">
        <el-input v-model="input" placeholder="请输入场地名称" @change="pointSeach"></el-input>
        <el-button class="search-btn" @click="pointSeach">搜索</el-button>
      </div>

      <div class="date-picker-box">
        <el-date-picker
          v-model="dataPickerVal"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
        <el-button class="search-btn" @click="deteSeach">搜索</el-button>
      </div>
      <download-excel
        class="export-excel-wrapper"
        :data="tableData"
        :fields="json_fields"
        name="日志.xls"
      >
        <el-button class="search-btn">导出数据</el-button>
      </download-excel>
    </div>
    <div class="table-box">
      <div class="operate-box" v-if="userLevel == 3000">
        <el-radio v-model="radio" label="1">可投放设备</el-radio>
        <el-radio v-model="radio" label="2">不可投放设备</el-radio>
        <el-button type="primary" plain @click="showTransfer(1)">开启投放</el-button>
        <el-button type="primary" plain @click="showTransfer(2)">关闭投放</el-button>
      </div>
      <el-dialog
        title="设备状态管理"
        :visible.sync="transferDialogVisible"
        width="60%"
        center
        @close="dialogHide"
      >
        <div class="flex-row flex-justify-content-c">
          <el-transfer
            v-model="transferValue"
            :data="machineData"
            :button-texts="['取消', '选择']"
            :titles="transferTitle"
          ></el-transfer>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="transferDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="upServing">确 定</el-button>
        </span>
      </el-dialog>
      <el-table
        :data="tableData"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column type="selection" width="30"></el-table-column>
        <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
          <template slot-scope="scope">
              <div >{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="开放状态" show-overflow-tooltip>
           <template slot-scope="scope">
              <div >{{scope.row.name}}</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="address" label="设备地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="region" label="所属点位" show-overflow-tooltip></el-table-column>
        <el-table-column
          prop="viewers_today"
          label="今日观看"
          sortable
          show-overflow-tooltip
          min-width="55"
        ></el-table-column>
        <el-table-column
          prop="viewers_yesterday"
          label="昨日"
          sortable
          show-overflow-tooltip
          min-width="50"
        ></el-table-column>
        <el-table-column
          prop="viewers_per"
          label="日均"
          sortable
          show-overflow-tooltip
          min-width="50"
        ></el-table-column>
        <el-table-column
          prop="visitors_per"
          label="日均人流量"
          sortable
          show-overflow-tooltip
          min-width="60"
        ></el-table-column>
        <el-table-column prop="viewers_total" label="总观看" sortable show-overflow-tooltip min-width='50'></el-table-column>
        <el-table-column prop="visitors_total" label="总人流" sortable show-overflow-tooltip min-width='50'></el-table-column>
        <!-- <el-table-column prop="visitors_per" label="广告主"  show-overflow-tooltip min-width='50'></el-table-column> -->
        <el-table-column label="操作" min-width="50">
          <template slot-scope="scope">
            <el-button @click="seeAD(scope.row)" type="text" size="small">查看广告</el-button>
          </template>
          <!-- <el-button type="text" @click="seeAD(index)"></el-button> -->
        </el-table-column>
        <!-- <el-table-column prop="change_time" label="模板更换时间"></el-table-column> -->
      </el-table>
    </div>
    <div class="flex-row flex-align-items-c flex-justify-content-c my-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="meta.current_page"
        :page-size="page_size"
        layout="prev, pager, next, jumper"
        :total="meta.total"
        background
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { setTimeout } from 'timers'
export default {
  props: {},
  data () {
    return {
      json_fields: {
        设备名称: 'name',
        设备地址: 'address',
        所属点位: 'region',
        今日观看: 'viewers_today',
        昨日观看: 'viewers_yesterday',
        日均观看: 'viewers_per',
        日均人流量: 'visitors_per'
      },
      transferDialogVisible: false,
      transferValue: [],
      transferTitle: ['待开启设备', '已选择的设备'],
      machineData: [
        {
          key: '',
          label: '晓波夜神'
        }
      ],
      input: '',
      dataPickerVal: [],
      currentPage: 5,
      radio: '',
      meta: {
        current_page: 1
      },
      pickerOptions: {
        disabledDate: time => {
          if (this.dataPickerVal != '') {
            return (
              time.getTime() > Date.now() ||
              time.getTime() > this.dataPickerVal
            )
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      page_size: 30,
      userLevel: JSON.parse(sessionStorage.getItem('userinfo')).level,
      tableData: [
        // {
        //   deviceName: "Dycb0001",
        //   deviceAddress: "厦门高崎机场T4候机楼",
        //   point: "厦门高崎T3",
        //   nowDaySee: "999",
        //   taDaySee: "999",
        //   dailyAverage: "9999",
        //   humanTraffic: "999",
        //   date: "2016-05-02"
        // },
        // {
        //   deviceName: "Dycb0001",
        //   deviceAddress: "厦门高崎机场T4候机楼",
        //   point: "厦门高崎T3",
        //   nowDaySee: "999",
        //   taDaySee: "999",
        //   dailyAverage: "9999",
        //   humanTraffic: "999",
        //   date: "2016-05-02"
        // },
        // {
        //   deviceName: "Dycb0001",
        //   deviceAddress: "厦门高崎机场T4候机楼",
        //   point: "厦门高崎T3",
        //   nowDaySee: "999",
        //   taDaySee: "999",
        //   dailyAverage: "9999",
        //   humanTraffic: "999",
        //   date: "2016-05-02"
        // },
        // {
        //   deviceName: "Dycb0001",
        //   deviceAddress: "厦门高崎机场T4候机楼",
        //   point: "厦门高崎T3",
        //   nowDaySee: "999",
        //   taDaySee: "999",
        //   dailyAverage: "9999",
        //   humanTraffic: "999",
        //   date: "2016-05-02"
        // },
        // {
        //   deviceName: "Dycb0001",
        //   deviceAddress: "厦门高崎机场T4候机楼",
        //   point: "厦门高崎T3",
        //   nowDaySee: "999",
        //   taDaySee: "999",
        //   dailyAverage: "9999",
        //   humanTraffic: "999",
        //   date: "2016-05-02"
        // }
      ]
    }
  },
  computed: {},
  created () {
    this.getMachineList()
  },
  mounted () {},
  watch: {},
  methods: {
    formatter (row, column) {
      return row.address
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.getMachineList()
    },
    pointSeach () {
      // this.dataPickerVal[0] = new Date();
      // this.dataPickerVal[1] = new Date();
      this.dataPickerVal = []
      // if (this.input != "") {
      setTimeout(() => {
        this.getMachineList()
      }, 500)
      // } else {
      //   this.$message.error({
      //     message: "请输入场地名称"
      //   });
      // }
    },
    deteSeach () {
      this.getMachineList()
    },
    seeAD (row) {
      console.log(row)
      this.$router.push({
        name: 'advertising',
        params: {
          id: row.machine_id
        }
      })
    },
    getMachineList () {
      let dataPickerValue = this.dataPickerVal
      let year = this.dataPickerVal.length
        ? new Date(dataPickerValue[0]).getFullYear()
        : new Date().getFullYear()
      let month = this.dataPickerVal.length
        ? new Date(dataPickerValue[0]).getMonth() + 1 > 9
          ? new Date(dataPickerValue[0]).getMonth() + 1
          : '0' + (new Date(dataPickerValue[0]).getMonth() + 1)
        : new Date().getMonth() + 1 > 9
          ? new Date().getMonth() + 1
          : '0' + (new Date().getMonth() + 1)
      let day = this.dataPickerVal.length
        ? new Date(dataPickerValue[0]).getDate() > 9
          ? new Date(dataPickerValue[0]).getDate()
          : '0' + new Date(dataPickerValue[0]).getDate()
        : new Date().getDate() > 9
          ? new Date().getDate()
          : '0' + (new Date().getDate())
      let endYear = this.dataPickerVal.length
        ? new Date(dataPickerValue[1]).getFullYear()
        : new Date().getFullYear()
      let endMonth = this.dataPickerVal.length
        ? new Date(dataPickerValue[1]).getMonth() + 1 > 9
          ? new Date(dataPickerValue[1]).getMonth() + 1
          : '0' + (new Date(dataPickerValue[1]).getMonth() + 1)
        : new Date().getMonth() + 1 > 9
          ? new Date().getMonth() + 1
          : '0' + (new Date().getMonth() + 1)
      let endDay = this.dataPickerVal.length
        ? new Date(dataPickerValue[1]).getDate() > 9
          ? new Date(dataPickerValue[1]).getDate()
          : '0' + new Date(dataPickerValue[1]).getDate()
        : new Date().getDate() > 9
          ? new Date().getDate()
          : '0' + (new Date().getDate())
      console.log(year, month, day)
      let start = `${year}-${month}-${day} 00:00:00`
      let end = `${endYear}-${endMonth}-${endDay} 23:59:59`
      let code = `advertiser_id=${
        JSON.parse(sessionStorage.getItem('userinfo')).id
      }&address=${this.input}&page_size=${this.page_size}&page=${
        this.meta.current_page
      }&start=${start}&end=${end}`
      console.log(code)
      let RASCODE = this.$getCode(code)
      this.http
        .getMachineList({
          secret: RASCODE
        })
        .then(res => {
          console.log(res)
          if (res.data.errno == '000') {
            this.tableData = res.data.result.data
            this.meta = res.data.result.meta
          } else {
            this.tableData = [];
            (this.meta = {
              current_page: 1
            }),
            this.$message.error({
              message: res.data.errmsg
            })
          }
        })
        .catch(err => {})
    },
    showTransfer (sta) {
      this.transferDialogVisible = !this.transferDialogVisible
      sta == 1
        ? (this.transferTitle[0] = '待开启设备')
        : (this.transferTitle[0] = '待关闭设备')
    },
    dialogHide () {
      this.machineData = []
      this.value = []
    },
    upServing () {}
  },
  components: {}
}
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
